<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.set的使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>学校信息</h1>
   <h1>名称{{school.name}}</h1>
    <h1>地址{{school.address}}</h1>
    <h1>校长：{{school.leader}}</h1>
    <hr>
    <h1>学生信息</h1>
    <button @click="addSex">点我添加学生性别</button>
    <h2>姓名{{student.name}}</h2>
    <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
    <h2 v-if="student.sex">性别：{{student.sex}}</h2>
    <h2>朋友们</h2>
    <ul>
        <li v-for="(f,index) in student.friend" :key="index">
            {{f.name}}--{{f.age}}
        </li>
    </ul>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip=false


    const vm=new Vue({
        el:'#root',
        data:{
            school:{
                name:'dsw',
                address:'beijing',

            },
            student:{
                name: 'sam',
                age:{
                    rAge:32,
                    sAge:18,
                },
                friend:[
                    {name:'ken',age:34},
                    {name: 'cong',age: 31}
                ]
            },

        },
        methods:{
            addSex(){
                //Vue.set(this.student,'sex','男')
                this.$set(this.student,'sex','男')
            }
        }
    })
</script>
</html>